<template>
  <svg-icon :icon-class="iconName" @click="clickFullScreen" />
</template>

<script>
import screenfull from 'screenfull'
import { ElMessage } from 'element-plus'
import SvgIcon from '@/components/SvgIcon'
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
export default {
  name: 'Screenfull',
  components: {
    SvgIcon
  },
  setup() {
    const isFullScreen = ref(false)
    const iconName = computed(() => {
      return !isFullScreen.value ? 'size-original-s-o' : 'size-stretch-s-o'
    })

    const change = () => {
      isFullScreen.value = screenfull.isFullscreen
    }

    const init = () => {
      if (screenfull.isEnabled) {
        screenfull.on('change', change)
      }
    }

    const destroy = () => {
      if (screenfull.isEnabled) {
        screenfull.off('change', change)
      }
    }

    const clickFullScreen = () => {
      if (!screenfull.isEnabled) {
        ElMessage({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    }

    onMounted(() => {
      init()
    })

    onBeforeUnmount(() => {
      destroy()
    })

    return {
      iconName,
      clickFullScreen
    }
  }
}
</script>

<style scoped>

</style>
